---
import FontAwesomeIcon from "../FontAwesomeIcon.astro";
---

<div class="card flex flex-col md:flex-row md:gap-4 lg:flex-col lg:gap-0">
  <div class="icon-badge mb-4 shrink-0">
    <FontAwesomeIcon icon={Astro.props.icon} />
  </div>
  <div class="grow">
    <h3 class="text-lg md:text-xl font-semibold mb-2">
      {Astro.props.title}
    </h3>
    <p class="text-muted-foreground">
      {Astro.props.description}
    </p>
  </div>
</div>
